<template>
    <div class="vxe-table-wrapper">
        <slot
            :data="tableData"
            :tablePage="tablePage"
            :loading="loading"
            :sortChangeEvent="sortChangeEvent"
            :handlePageChange="handlePageChange">
        </slot>
    </div>
</template>

<script>
    import {prefix} from '../config';
    export default {
        name: `${prefix}RemoteVxeTable`,
        props: {
            dataFun: Function,
            params: {
                type: Object,
                default() {
                    return {
                        noFirstRequestTable:false
                    };
                }
            },
            pagerSlot: {
                type: Boolean,
                default: false
            },
            pagerLayOut: {
                default() {
                    return [
                        'PrevJump',
                        'PrevPage',
                        'JumpNumber',
                        'NextPage',
                        'NextJump',
                        'Sizes',
                        'FullJump',
                        'PageCount',
                        'Total'
                    ];
                }
            }
        },
        data () {
            return {
                vxeGridCheckboxList:{},
                vxeGridCheckboxArr:[],
                isChangePageSize:false,
                aliasId:'',

                vxeGridCheckboxListOrigin:{},
                vxeGridCheckboxArrOrigin:[],

                tableData: [],
                loading: false,
                tablePage: {
                    total: 0,
                    currentPage: 1,
                    pageSize: 20,
                    align: 'right',
                    pageSizes: [10, 20, 50, 100, 200, 500],
                    layouts:this.pagerLayOut,
                    perfect: true,
                    slots: this.pagerSlot ? {
                        // 使用自定义插槽
                        left: 'pager_left',
                    } : {}
                },
                column: '',
                order: '',
            };
        },
        created () {
            this.tablePage.pageSize = this.params && this.params.pageSize || 20;
            this.params.pageSize = this.params.pageSize || 20;
            this.reload();
        },
       watch:{
           // 封装表格分页设置动态设置-mixins/pagerLayOut.js使用
           pagerLayOut(value){
               this.tablePage.layouts = value;
           },
           vxeGridCheckboxArr: {
               handler: function(val) {
                   val = val || [];
                   this.$emit('vxeGridCheckboxEvent',[...val]);
               },
               immediate: true
           },
           vxeGridCheckboxArrOrigin: {
               handler: function(val) {
                   val = val || [];
                   this.$emit('vxeGridCheckboxEventOrigin',[...val]);
               },
               immediate: true
           }
       },
        methods: {
            // 设置或者获取多选框选中的值(数组)--根据id
            getVxeGridCheckBox({records = [], params = {}, aliasId = ''} = {}){
                aliasId = aliasId || this.aliasId;
                if (Object.keys(params).length > 0) {
                    this.aliasId = aliasId; //保存aliasId
                    this.vxeGridCheckboxList[params.currentPage] = records;
                }
                let obj = this.vxeGridCheckboxList;
                let tem = [], tem2 = [];
                for (let k in obj) {
                    tem.push(...obj[k].map(item => item[aliasId]));
                    tem2.push(...obj[k]);
                }
                this.vxeGridCheckboxArr = tem2;
                return [...tem];
            },
            // 设置或者获取多选框选中的值(数组)--根据行数据，row
            getVxeGridCheckBoxOrigin({records = [], params = {}} = {}){
                if (Object.keys(params).length > 0) {
                    this.vxeGridCheckboxListOrigin[params.currentPage] = records;
                }
                let obj = this.vxeGridCheckboxListOrigin;
                let tem = [];
                for (let k in obj) {
                    tem.push(...obj[k]);
                }
                this.vxeGridCheckboxArrOrigin = tem;
                return [...tem];
            },

            clearVxeGridCheckBoxListOrigin(){
                this.vxeGridCheckboxListOrigin = {};
                this.vxeGridCheckboxArrOrigin = [];
            },

            clearVxeGridCheckBoxList(){
                this.vxeGridCheckboxList = {};
                this.vxeGridCheckboxArr = [];
            },

            reload(params = {}) {
                if (params.noFirstRequestTable) {
                    params.noFirstRequestTable = false;
                }

                // 如果有pageSize和pageNum设置，则重置分页器页数
                if(params.pageSize) {
                    this.tablePage.pageSize = params.pageSize;
                }
                if(params.pageNum) {
                    this.tablePage.currentPage = params.pageNum;
                }

                this.getData({
                    pageSize: this.tablePage.pageSize,
                    pageNum: this.tablePage.currentPage || 1,
                    ...this.params,
                    ...params
                });
            },
            getData(params) {
                //是否首次请求表格数据
                if (params.noFirstRequestTable) {return;}
                this.loading = true;
                Object.assign(params, { column: this.column, order: this.order});
                if ('noFirstRequestTable' in params) { delete params.noFirstRequestTable; }
                this.dataFun(params).then(ret => {
                    this.loading = false;
                    let data = ret.data;
                    const tablePage = {...this.tablePage};
                    tablePage.total = data && data.total || 0;
                    tablePage.currentPage = data && data.current || 0;
                    let temList = data && data.records && JSON.parse(JSON.stringify(data.records)) || [];
                    this.tableData = temList;
                    this.tablePage = tablePage;
                    this.$emit('afterLoad', ret, params,this.isChangePageSize);
                    this.isChangePageSize = false;
                }).catch(err => {
                    this.loading = false;
                    this.$emit('afterLoadErr', err);
                });
            },
            handlePageChange ({ currentPage, pageSize }) {
                // if(this.params.pageSize != pageSize){
                //     this.clearVxeGridCheckBoxList();
                //     this.clearVxeGridCheckBoxListOrigin();
                //     this.isChangePageSize = true;
                // }
                this.tablePage.currentPage = currentPage;
                this.tablePage.pageSize = pageSize;
                this.params.pageSize = pageSize;
                this.params.pageNum = currentPage;
                this.reload();
            },
            sortChangeEvent ({ property, order }) {
                this.order = order || '';
                this.column = order ? property : '';
                this.reload();
            },
        }
    };
</script>

<style scoped lang="scss">
    /deep/.pager_left {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
    }
</style>
